<template>
  <h2 v-if="status == 1">等待审核页面</h2>
  <h2 v-if="status == 2">审核未通过页面</h2>
  <h2 v-if="status == 3">等待发布页面</h2>
  <h2 v-if="status == 4">已发布页面</h2>
  <el-table
      :data="tableData"
      style="width: 100%"
      @row-click="see">

    <el-table-column v-if="status == 1"
        label="提交审核时间">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span>{{ scope.row.submit_time }}</span>
      </template>
    </el-table-column>
    <el-table-column v-else-if="status == 4"
                     label="发布时间">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span>{{ scope.row.release_time }}</span>
      </template>
    </el-table-column>

    <el-table-column
        label="资讯标题" >
      <template #default="scope" >
        <span class="overflow">{{ scope.row.article_title }}</span>
      </template>
    </el-table-column>

    <el-table-column
        label="资讯内容" >
      <template #default="scope" >
        <span class="overflow">{{ scope.row.article_content }}</span>
      </template>
    </el-table-column>

    <el-table-column
        label="编辑名字" >
      <template #default="scope" >
        <span>{{ scope.row.username }}</span>
      </template>
    </el-table-column>

  </el-table>
  <el-pagination class="paging"
                 @click="change()"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :page-size="pagination.page_size"
                 layout="prev, pager, next"
                 :total="pagination.total">
  </el-pagination>
</template>

<script>
export default {
  name:"ArticleList",
  data() {
    return {
      tableData: [],
      pagination: {
        page_index: 1, // 当前位于哪页
        page_size:1,
        total: 1, // 总数
      },
      status: "",
      title: "",
    }
  },

  created(){
    this.A()
  },

  methods: {

    test(){
      console.log(111)
    },
    handleEdit(index, row) {
      // let id = JSON.parse(JSON.stringify(row)).article_id;
      // // console.log(this.status)
      // this.$router.push("/fix/" + id);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    see(row){
      // console.log(index, row)
      // console.log(JSON.parse(JSON.stringify(row)).article_content);
      let id = JSON.parse(JSON.stringify(row)).article_id;
      if(this.status == 2 && JSON.parse(window.sessionStorage.getItem('user')).role == 1) {
          this.$router.push("/fix/" + id);
      }else {
          this.$router.push("/ArticlePage/" + id);
      }

    },

    change(){
      // console.log()
      // console.log(this.pagination.total)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pagination.page_index = val;
      this.A();
    },

    A(){
      // console.log("hello")
      this.status = this.$route.params.statusId;

      // console.log(this.$route.params.statusId);

      let that = this;
      let user = JSON.parse(window.sessionStorage.getItem('user'));
      let userId = null;
      if(user.role == 1 && (this.status == 1 || this.status == 2)) {
        userId = user.userId;
      }
      this.$axios({
        method: 'get',
        url: "/articles/list",
        params:{
          pageCurrent:this.pagination.page_index,
          statusId:this.status,
          userId: userId,
        }
      }).then(function (response) {
        // console.log(response);
        that.tableData = response.data.data;
        that.pagination.total = response.data.total;
        that.pagination.page_size = response.data.pageSize;

      }).catch(function (error) {
        console.log(error);
      });
    }
  },

}
</script>

<style scoped>

.paging {
}

.overflow{
  width:180px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}

</style>